<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 导航栏</title>
    <style type="text/css">
        /*  注意的导航栏 和 iOS中的还是有区别 */
        ul.vertical{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        a:link,a:visited
        {
            display:block;
            font-weight:bold;
            color:#FFFFFF;
            background-color:#bebebe;
            width:120px;
            text-align:center;
            padding:4px;
            text-decoration:none;
            text-transform:uppercase;
        }
        a:hover,a:active
        {
            background-color:#cc0000;
        }

        ul.horizontal{
            list-style-type:none;
            margin:0;
            padding:0;
            overflow:hidden;
        }

        li.horizontal{
           float: left;
        }

    </style>
</head>
<body>
    <ul class="vertical">
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <p>为了显示出链接区域，我们为链接添加了背景色。</p>
    <p>请注意，全部链接区域都是可点击的，不仅仅是文本。</p>
    <!--
    display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
    width:60px - 块元素默认占用全部可用宽度。我们需要规定 60 像素的宽度。
    -->

    <!-- 这是一个水平方向的导航条 鼠标点在上面或者移动的过程中会有不同的效果 -->
    <ul class="horizontal">
        <li class="horizontal"><a href="#home">Home</a></li>
        <li class="horizontal"><a href="#news">News</a></li>
        <li class="horizontal"><a href="#contact">Contact</a></li>
        <li class="horizontal"><a href="#about">About</a></li>
    </ul>
    <p><b>注释：</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。</p>

</body>
</html>